<template>
  <layout navbar="none" :showBack="false" navbarBackgroundColor="#020303" v-if="userInfo && userInfo.isVip">
	<!-- 自定义导航栏 -->
	<tn-nav-bar
	  fixed
	  alpha
	  backgroundColor="#020303"
	  :isBack="true"
	  fontColor="#FFFFFF"
	  @leftClick="goBack">
	  <view class="header-title">金币明细</view>
	</tn-nav-bar>
    <view class="coin-detail-page">
      <!-- 使用z-paging组件替换原有的明细列表 -->
      <z-paging
        ref="paging"
        v-model="coinRecords"
        @query="queryList"
        :default-page-size="pageSize"
        :auto="true"
        :paging-style="{paddingTop: vuex_status_bar_height + 44 + 'px'}"
        :bg-color="'#020303'"
        :loading-more-enabled="true"
        :show-refresher-when-reload="true"
        :refresher-threshold="80"
        :refresher-default-text="'下拉刷新'"
        :refresher-pulling-text="'释放立即刷新'"
        :refresher-refreshing-text="'加载中...'"
        :loading-more-custom-style="{color: '#B3F73C'}"
        :show-loading-more-no-more-view="false"
        :hide-loading-more-when-no-more-and-inside-of-paging="true"
        :empty-view-text="emptyStateText"
        :empty-view-reload-text="'点击刷新'"
        :show-empty-view-reload="true"
        :auto-show-back-to-top="false"
        :auto-clean-list-when-reload="true"
        :fixed="true"
        :safe-area-inset-bottom="true"
        :auto-height="true"
        :system-container-height="true"
        @scrolltolower="handleScrollToLower"
        @scrolltoupper="handleScrollToUpper"
        @scroll="handleScroll"
        @refresherRefresh="onRefresh"
        @empty-view-reload="refreshRecords"
      >
        <template #top>
            <view>
				<!-- 金币总览 -->
				<view class="coins-overview">
				  <view class="coin-particles">
				    <view class="particle" v-for="i in 5" :key="i"></view>
				  </view>
				  <view class="overview-header">
				    <view class="overview-title">
				      <text>我的金币</text>
				      <view class="coin-icon-wrap"><text class="tn-icon-money-fill coin-icon"></text></view>
				    </view>
				    <view class="overview-value" @tap="animateCoinValue">
				      <text class="coins-value" ref="coinsValue">{{ userInfo.coins || 0 }}</text>
				    </view>
				  </view>
				  <view class="coins-shine"></view>
				  <view class="overview-actions">
				    <view class="action-btn recharge-btn" hover-class="btn-hover" @tap="showRechargeModal">
				      <text class="btn-icon tn-icon-add-fill"></text>充值
				    </view>
				    <view class="action-btn tasks-btn" hover-class="btn-hover" @tap="showTaskNotImplemented">
				      <text class="btn-icon tn-icon-gift"></text>做任务赚金币
				    </view>
				  </view>
				</view>
				
				<!-- 筛选区域 -->
				<view class="sticky-filter-tabs">
				  <view class="filter-tabs">
				    <view 
				      class="filter-tab" 
				      :class="{'active': currentTab === 'all'}" 
				      @tap="changeTab('all')">
				      全部
				    </view>
				    <view 
				      class="filter-tab" 
				      :class="{'active': currentTab === 'income'}" 
				      @tap="changeTab('income')">
				      收入
				    </view>
				    <view 
				      class="filter-tab" 
				      :class="{'active': currentTab === 'expense'}" 
				      @tap="changeTab('expense')">
				      支出
				    </view>
				  </view>
				  <view class="filter-date" @tap="showDatePicker">
				    <text>{{ dateRangeText }}</text>
				    <text class="tn-icon-calendar"></text>
				  </view>
				</view>
			</view>
        </template>
        
        <!-- 明细列表 -->
        <view class="coin-records">
          <view 
            class="record-item" 
            v-for="(record, index) in filteredRecords" 
            :key="index">
            <view :class="record.iconWrapClass">
              <text :class="record.iconClass"></text>
            </view>
            <view class="record-info">
              <view class="record-title">{{ record.title }}</view>
              <view class="record-time">{{ record.time }}</view>
              <view class="record-desc" v-if="record.description">{{ record.description }}</view>
            </view>
            <view :class="record.amountWrapClass">
              <text>{{ record.isIncome ? '+' : '-' }}{{ record.amount }}</text>
            </view>
          </view>
        </view>
        
        <!-- 底部间距 -->
        <template #bottom>
          <view style="height: 0rpx;"></view>
        </template>
      </z-paging>
      
      <!-- 充值金币弹窗 -->
      <coin-recharge-popup :show.sync="isRechargeModalVisible" @recharge-success="onRechargeSuccess"></coin-recharge-popup>
      
      <!-- 日期选择弹窗 -->
      <tn-popup mode="bottom" v-model="isDatePickerVisible" :safeAreaInsetBottom="true" maskCloseable :customStyle="{borderRadius: '24rpx 24rpx 0 0'}" backgroundColor="transparent">
        <view class="date-picker-popup">
          <view class="date-picker-header">
            <view class="date-picker-title">选择日期范围</view>
            <view class="close-btn" @tap="hideDatePicker">
              <text class="tn-icon-close"></text>
            </view>
          </view>
          <view class="date-picker-content">
            <view class="quick-date-options">
              <view 
                class="quick-date-option" 
                :class="{'active': dateRange === 'today'}" 
                @tap="selectDateRange('today')">
                今天
              </view>
              <view 
                class="quick-date-option" 
                :class="{'active': dateRange === 'yesterday'}" 
                @tap="selectDateRange('yesterday')">
                昨天
              </view>
              <view 
                class="quick-date-option" 
                :class="{'active': dateRange === 'week'}" 
                @tap="selectDateRange('week')">
                本周
              </view>
              <view 
                class="quick-date-option" 
                :class="{'active': dateRange === 'month'}" 
                @tap="selectDateRange('month')">
                本月
              </view>
              <view 
                class="quick-date-option" 
                :class="{'active': dateRange === 'custom'}" 
                @tap="selectDateRange('custom')">
                自定义
              </view>
            </view>
            
            <!-- 自定义日期选择器 -->
            <view class="custom-date-picker" v-if="dateRange === 'custom'">
              <view class="date-inputs">
                <view class="date-input">
                  <view class="input-label">起始日期</view>
                  <picker 
                    mode="date" 
                    :value="startDate" 
                    @change="onStartDateChange">
                    <view class="picker-value">{{ startDate || '请选择' }}</view>
                  </picker>
                </view>
                <view class="date-separator">-</view>
                <view class="date-input">
                  <view class="input-label">结束日期</view>
                  <picker 
                    mode="date" 
                    :value="endDate" 
                    @change="onEndDateChange">
                    <view class="picker-value">{{ endDate || '请选择' }}</view>
                  </picker>
                </view>
              </view>
            </view>
            
            <view class="date-picker-actions">
              <view class="reset-btn" @tap="resetDateFilter">重置</view>
              <view class="confirm-btn" @tap="applyDateFilter">确定</view>
            </view>
          </view>
        </view>
      </tn-popup>
      
      <!-- 提示框 -->
      <tn-toast ref="toast"></tn-toast>
    </view>
  </layout>
</template>

<script>
import Layout from '@/components/layout/layout.vue';
import CoinRechargePopup from '@/components/common/CoinRechargePopup.vue';
import router from '@/utils/router';
import { mapState } from 'vuex';

export default {
  components: {
    Layout,
    CoinRechargePopup
  },
  data() {
    return {
      // 当前选择的标签页: 'all', 'income', 'expense'
      currentTab: 'all',
      
      // 日期筛选相关
      dateRange: 'month', // 默认显示本月
      startDate: '',
      endDate: '',
      isDatePickerVisible: false,
      
      // 充值弹窗
      isRechargeModalVisible: false,
      
      // 记录列表
      coinRecords: [],
      page: 1,
      pageSize: 20,
      hasMoreData: true,
      isLoading: false,
      
      // 添加滚动相关
      scrollTop: 0,
      showBackToTop: false,
      isScrollingToTop: false,
      
      // 金币获取类型
      incomeTypes: {
        'sign-in': { title: '签到奖励', icon: 'tn-icon-calendar-fill' },
        'recharge': { title: '金币充值', icon: 'tn-icon-money-fill' },
        'admin-gift': { title: '系统赠送', icon: 'tn-icon-gift' },
        'user-gift': { title: '好友赠送', icon: 'tn-icon-present' },
        'user-reward': { title: '礼物打赏', icon: 'tn-icon-flower' },
        'video-reward': { title: '视频奖励', icon: 'tn-icon-video' },
        'task-reward': { title: '任务奖励', icon: 'tn-icon-task' },
        'profile-reward': { title: '完善资料', icon: 'tn-icon-edit' },
        'invite-reward': { title: '邀请奖励', icon: 'tn-icon-share' }
      },
      
      // 金币消费类型
      expenseTypes: {
        'post-cost': { title: '发布动态', icon: 'tn-icon-send' },
        'chat-cost': { title: '聊天费用', icon: 'tn-icon-message' },
        'contact-cost': { title: '查看微信', icon: 'tn-icon-wechat' },
        'search-cost': { title: '搜索消耗', icon: 'tn-icon-search' },
        'match-cost': { title: '匹配消耗', icon: 'tn-icon-menu-match' },
        'gift-cost': { title: '赠送礼物', icon: 'tn-icon-gift' },
        'unlock-cost': { title: '内容解锁', icon: 'tn-icon-unlock' }
      }
    };
  },
  computed: {
    ...mapState('user', ['userInfo']),
    
    // 根据当前标签和日期过滤后的记录
    filteredRecords() {
      let records = [...this.coinRecords];
      
      // 按类型筛选
      if (this.currentTab === 'income') {
        records = records.filter(record => record.isIncome);
      } else if (this.currentTab === 'expense') {
        records = records.filter(record => !record.isIncome);
      }
      
      // 按日期筛选
      if (this.startDate && this.endDate) {
        const startTimestamp = new Date(this.startDate).getTime();
        const endTimestamp = new Date(this.endDate).getTime() + 24 * 60 * 60 * 1000 - 1; // 结束日期的23:59:59
        
        records = records.filter(record => {
          const recordDate = new Date(record.timestamp);
          return recordDate >= startTimestamp && recordDate <= endTimestamp;
        });
      }
      
      return records;
    },
    
    // 日期范围显示文本
    dateRangeText() {
      switch(this.dateRange) {
        case 'today': return '今天';
        case 'yesterday': return '昨天';
        case 'week': return '本周';
        case 'month': return '本月';
        case 'custom': 
          if (this.startDate && this.endDate) {
            return `${this.startDate} ~ ${this.endDate}`;
          }
          return '选择日期';
        default: return '本月';
      }
    },
    
    // 空状态提示文本
    emptyStateText() {
      if (this.currentTab === 'all') {
        return '暂无任何金币记录';
      } else if (this.currentTab === 'income') {
        return '暂无金币收入记录';
      } else {
        return '暂无金币支出记录';
      }
    }
  },
  onLoad() {
    // 设置默认日期为本月
    this.setCurrentMonthDateRange();
  },
  methods: {
    // 导航返回
    goBack() {
      uni.navigateBack({
        delta: 1
      });
    },
    
    // z-paging查询列表数据
    queryList(pageNo, pageSize) {
      this.page = pageNo;
      this.pageSize = pageSize;
      this.isLoading = true;
      
      // 这里模拟从后端获取数据
      setTimeout(() => {
        // 模拟的数据
        const newRecords = this.getMockRecords();
        
        // 模拟分页逻辑
        this.hasMoreData = this.page < 3; // 最多加载3页
        this.isLoading = false;
        
        // 将数据传给z-paging处理
        this.$refs.paging.complete(newRecords);
      }, 1000);
    },
    
    // 刷新记录
    refreshRecords() {
      if (this.$refs.paging) {
        this.$refs.paging.reload();
      }
    },
    
    // 下拉刷新回调
    onRefresh() {
      this.refreshRecords();
    },
    
    // 滚动到底部
    handleScrollToLower() {
      console.log('滚动到底部');
    },
    
    // 滚动到顶部
    handleScrollToUpper() {
      console.log('滚动到顶部');
    },
    
    // 滚动事件处理
    handleScroll(e) {
      this.scrollTop = e.scrollTop;
      // 根据滚动位置显示或隐藏回到顶部按钮
      this.showBackToTop = this.scrollTop > 300;
    },
    
    // 导航到其他页面
    navigateTo(page, params = {}) {
      router.go(`/pages/${page}/${page}`, params);
    },
    
    // 切换标签
    changeTab(tab) {
      this.currentTab = tab;
      this.refreshRecords();
    },
    
    // 显示日期选择器
    showDatePicker() {
      this.isDatePickerVisible = true;
    },
    
    // 隐藏日期选择器
    hideDatePicker() {
      this.isDatePickerVisible = false;
    },
    
    // 选择日期范围
    selectDateRange(range) {
      this.dateRange = range;
      
      switch(range) {
        case 'today':
          this.setTodayDateRange();
          break;
        case 'yesterday':
          this.setYesterdayDateRange();
          break;
        case 'week':
          this.setCurrentWeekDateRange();
          break;
        case 'month':
          this.setCurrentMonthDateRange();
          break;
        case 'custom':
          // 保持当前选择的日期或置为空
          break;
      }
    },
    
    // 设置今天日期范围
    setTodayDateRange() {
      const today = new Date();
      const formattedDate = this.formatDate(today);
      this.startDate = formattedDate;
      this.endDate = formattedDate;
    },
    
    // 设置昨天日期范围
    setYesterdayDateRange() {
      const yesterday = new Date();
      yesterday.setDate(yesterday.getDate() - 1);
      const formattedDate = this.formatDate(yesterday);
      this.startDate = formattedDate;
      this.endDate = formattedDate;
    },
    
    // 设置本周日期范围
    setCurrentWeekDateRange() {
      const today = new Date();
      const dayOfWeek = today.getDay() || 7; // 将周日的0转换为7
      const startDate = new Date(today);
      startDate.setDate(today.getDate() - dayOfWeek + 1); // 本周一
      
      this.startDate = this.formatDate(startDate);
      this.endDate = this.formatDate(today);
    },
    
    // 设置本月日期范围
    setCurrentMonthDateRange() {
      const today = new Date();
      const startDate = new Date(today.getFullYear(), today.getMonth(), 1);
      
      this.startDate = this.formatDate(startDate);
      this.endDate = this.formatDate(today);
    },
    
    // 格式化日期为YYYY-MM-DD
    formatDate(date) {
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      return `${year}-${month}-${day}`;
    },
    
    // 重置日期筛选
    resetDateFilter() {
      this.dateRange = 'month';
      this.setCurrentMonthDateRange();
    },
    
    // 应用日期筛选
    applyDateFilter() {
      // 检查自定义日期是否合法
      if (this.dateRange === 'custom') {
        if (!this.startDate || !this.endDate) {
          this.$refs.toast.show({ title: '请选择完整的日期范围', icon: 'error' });
          return;
        }
        
        const startTimestamp = new Date(this.startDate).getTime();
        const endTimestamp = new Date(this.endDate).getTime();
        
        if (startTimestamp > endTimestamp) {
          this.$refs.toast.show({ title: '开始日期不能大于结束日期', icon: 'error' });
          return;
        }
      }
      
      // 关闭日期选择器
      this.hideDatePicker();
      
      // 重新加载数据
      this.refreshRecords();
    },
    
    // 开始日期改变
    onStartDateChange(e) {
      this.startDate = e.detail.value;
    },
    
    // 结束日期改变
    onEndDateChange(e) {
      this.endDate = e.detail.value;
    },
    
    // 生成模拟数据
    getMockRecords() {
      const records = [];
      const today = new Date();
      
      // 收入类型
      const incomeTypes = Object.keys(this.incomeTypes);
      // 支出类型
      const expenseTypes = Object.keys(this.expenseTypes);
      
      // 根据当前页生成不同的数据
      const baseCount = this.page === 1 ? 0 : (this.page - 1) * this.pageSize;
      
      for (let i = 0; i < this.pageSize; i++) {
        const isIncome = Math.random() > 0.4; // 60%概率是收入
        const type = isIncome 
          ? incomeTypes[Math.floor(Math.random() * incomeTypes.length)]
          : expenseTypes[Math.floor(Math.random() * expenseTypes.length)];
        
        const amount = isIncome 
          ? Math.floor(Math.random() * 50) + 5 
          : Math.floor(Math.random() * 30) + 1;
        
        const daysAgo = baseCount + i;
        const recordDate = new Date(today);
        recordDate.setDate(today.getDate() - daysAgo % 30); // 最多往前30天
        recordDate.setHours(Math.floor(Math.random() * 24), Math.floor(Math.random() * 60));
        
        const timestamp = recordDate.getTime();
        const time = this.formatRecordTime(recordDate);
        
        // 为某些类型添加特殊描述
        let description = '';
        if (type === 'user-gift') {
          description = '来自用户"游戏大神"的赠送';
        } else if (type === 'task-reward') {
          description = '完成每日分享任务';
        } else if (type === 'admin-gift') {
          description = '平台活动奖励';
        } else if (type === 'chat-cost') {
          description = '向用户"电竞少女"发送消息';
        } else if (type === 'match-cost') {
          description = '游戏好友匹配服务';
        }
        
        // 获取标题和图标信息
        let title = '金币变动';
        let iconClass = 'tn-icon-coin';
        let iconWrapClass = 'record-icon';
        let amountWrapClass = 'record-amount';
        
        if (isIncome && this.incomeTypes[type]) {
          title = this.incomeTypes[type].title;
          iconClass = this.incomeTypes[type].icon;
          iconWrapClass = 'record-icon income-icon';
          amountWrapClass = 'record-amount income';
        } else if (!isIncome && this.expenseTypes[type]) {
          title = this.expenseTypes[type].title;
          iconClass = this.expenseTypes[type].icon;
          iconWrapClass = 'record-icon expense-icon';
          amountWrapClass = 'record-amount expense';
        }
        
        records.push({
          id: baseCount + i + 1,
          type,
          amount,
          isIncome,
          time,
          timestamp,
          description,
          title,
          iconClass,
          iconWrapClass,
          amountWrapClass
        });
      }
      
      return records;
    },
    
    // 格式化记录时间显示
    formatRecordTime(date) {
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      const hours = String(date.getHours()).padStart(2, '0');
      const minutes = String(date.getMinutes()).padStart(2, '0');
      
      const today = new Date();
      const isToday = date.getDate() === today.getDate() && 
                      date.getMonth() === today.getMonth() && 
                      date.getFullYear() === today.getFullYear();
      
      const yesterday = new Date(today);
      yesterday.setDate(today.getDate() - 1);
      const isYesterday = date.getDate() === yesterday.getDate() && 
                         date.getMonth() === yesterday.getMonth() && 
                         date.getFullYear() === yesterday.getFullYear();
      
      if (isToday) {
        return `今天 ${hours}:${minutes}`;
      } else if (isYesterday) {
        return `昨天 ${hours}:${minutes}`;
      } else {
        return `${year}-${month}-${day} ${hours}:${minutes}`;
      }
    },
    
    // 显示充值弹窗
    showRechargeModal() {
      this.isRechargeModalVisible = true;
    },
    
    // 充值成功回调
    onRechargeSuccess(data) {
      // 更新本地用户数据
      this.userInfo.coins = data.totalCoins;
      
      // 显示成功提示
      this.$refs.toast.show({
        title: `充值成功，获得${data.coins}金币`,
        icon: 'success'
      });
      
      // 刷新记录
      this.refreshRecords();
    },
    
    // 添加动画效果
    animateCoinValue() {
      // 创建跳跃的金币动画
      const coinValue = this.$refs.coinsValue;
      if (!coinValue) return;
      
      // 先停止已有动画
      coinValue.$el.style.animation = 'none';
      
      // 触发重绘
      void coinValue.$el.offsetWidth;
      
      // 应用新动画
      coinValue.$el.style.animation = 'coinJump 0.5s ease-out';
      
      // 添加临时的闪光效果
      const parent = this.$el.querySelector('.coins-overview');
      if (parent) {
        const shine = document.createElement('div');
        shine.className = 'temp-shine';
        parent.appendChild(shine);
        
        // 移除临时元素
        setTimeout(() => {
          parent.removeChild(shine);
        }, 1000);
      }
      
      // 创建临时的金币图标
      for (let i = 0; i < 3; i++) {
        setTimeout(() => {
          this.createFloatingCoin();
        }, i * 150);
      }
    },
    
    // 创建浮动金币图标
    createFloatingCoin() {
      const parent = this.$el.querySelector('.coins-overview');
      if (!parent) return;
      
      const coin = document.createElement('div');
      coin.className = 'floating-coin';
      coin.innerHTML = '<text class="tn-icon-money-fill"></text>';
      
      // 随机位置
      const startX = Math.random() * 60 + 40; // 40% 到 100% 的位置
      const startY = Math.random() * 20 + 40; // 40% 到 60% 的位置
      
      // 设置样式
      coin.style.left = `${startX}%`;
      coin.style.top = `${startY}%`;
      
      parent.appendChild(coin);
      
      // 1秒后移除
      setTimeout(() => {
        parent.removeChild(coin);
      }, 1000);
    },
    
    // 显示任务功能未开发提示
    showTaskNotImplemented() {
      this.$refs.toast.show({
        title: '任务功能暂未开放',
        icon: 'error',
        duration: 2000
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.coin-detail-page {
  background-color: #020303;
  color: #e0e0e0;
  padding-bottom: 30rpx;
  
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: radial-gradient(rgba(179, 247, 60, 0.03) 1px, transparent 1px);
    background-size: 30px 30px;
    pointer-events: none;
    z-index: 0;
  }
  
  .header-title {
    font-size: 36rpx;
    font-weight: 500;
    color: #FFFFFF;
  }
  
  /* 金币总览 */
  .coins-overview {
    background: linear-gradient(135deg, #1a2c42 0%, #0b1218 100%);
    border-radius: 24rpx;
    margin: 30rpx 30rpx 20rpx;
    padding: 40rpx 30rpx;
    position: relative;
    z-index: 1;
    box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.3);
    overflow: hidden;
    transition: transform 0.3s, box-shadow 0.3s;
    
    &::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 180rpx;
      background: linear-gradient(135deg, rgba(179, 247, 60, 0.25) 0%, rgba(179, 247, 60, 0) 100%);
      opacity: 0.3;
      border-radius: 24rpx 24rpx 100% 100%;
      transform: scaleX(1.2);
    }
    
    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-image: radial-gradient(rgba(179, 247, 60, 0.05) 1px, transparent 1px);
      background-size: 20px 20px;
      opacity: 0.3;
      z-index: -1;
    }
    
    /* 金币粒子效果 */
    .coin-particles {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      overflow: hidden;
      pointer-events: none;
      
      .particle {
        position: absolute;
        width: 20rpx;
        height: 20rpx;
        background-color: rgba(179, 247, 60, 0.5);
        border-radius: 50%;
        opacity: 0;
        
        &:nth-child(1) {
          top: 20%;
          left: 10%;
          animation: particle-animation 3s infinite 0.2s;
        }
        
        &:nth-child(2) {
          top: 40%;
          left: 25%;
          animation: particle-animation 4s infinite 0.5s;
        }
        
        &:nth-child(3) {
          top: 30%;
          right: 30%;
          animation: particle-animation 3.5s infinite 1s;
        }
        
        &:nth-child(4) {
          top: 60%;
          right: 10%;
          animation: particle-animation 4s infinite 1.5s;
        }
        
        &:nth-child(5) {
          top: 70%;
          left: 40%;
          animation: particle-animation 3s infinite 2s;
        }
      }
    }
    
    /* 闪光效果 */
    .coins-shine {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 300%;
      height: 200rpx;
      background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.1) 50%, rgba(255,255,255,0) 100%);
      transform: translate(-50%, -50%) rotate(-20deg);
      animation: shine-animation 8s infinite linear;
      pointer-events: none;
    }
    
    .overview-header {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      margin-bottom: 30rpx;
      position: relative;
      z-index: 2;
      
      .overview-title {
        font-size: 32rpx;
        color: #e0e0e0;
        display: flex;
        align-items: center;
        
        .coin-icon-wrap {
          margin-left: 10rpx;
          width: 40rpx;
          height: 40rpx;
          border-radius: 50%;
          background: linear-gradient(45deg, #B3F73C, #8eac21);
          display: flex;
          align-items: center;
          justify-content: center;
          animation: bounce 2s infinite;
          
          .coin-icon {
            font-size: 24rpx;
            color: #020303;
          }
        }
      }
      
      .overview-value {
        .coins-value {
          font-size: 72rpx;
          font-weight: 700;
          background: linear-gradient(45deg, #FFD700, #B3F73C);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          text-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
          position: relative;
          display: inline-block;
          transition: transform 0.3s;
          animation: pulse 2s infinite;
        }
      }
    }
    
    .overview-actions {
      display: flex;
      margin-top: 40rpx;
      position: relative;
      z-index: 2;
      
      .action-btn {
        flex: 1;
        height: 80rpx;
        border-radius: 40rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 28rpx;
        font-weight: 500;
        transition: all 0.3s;
        
        .btn-icon {
          margin-right: 8rpx;
          font-size: 32rpx;
        }
        
        &.recharge-btn {
          background: linear-gradient(135deg, #B3F73C, #8eac21);
          color: #020303;
          margin-right: 20rpx;
          box-shadow: 0 4rpx 15rpx rgba(179, 247, 60, 0.4);
        }
        
        &.tasks-btn {
          background: rgba(179, 247, 60, 0.15);
          color: #B3F73C;
          border: 1px solid rgba(179, 247, 60, 0.3);
          text-shadow: 0 0 10rpx rgba(179, 247, 60, 0.2);
        }
      }
      
      .btn-hover {
        transform: translateY(3rpx);
        opacity: 0.9;
      }
    }
    
    /* 添加动画关键帧 */
    @keyframes particle-animation {
      0% {
        transform: translateY(0) scale(1);
        opacity: 0;
      }
      20% {
        opacity: 0.5;
      }
      100% {
        transform: translateY(-120rpx) scale(0);
        opacity: 0;
      }
    }
    
    @keyframes shine-animation {
      0% {
        transform: translate(-50%, -50%) rotate(-20deg) translateX(-100%);
      }
      100% {
        transform: translate(-50%, -50%) rotate(-20deg) translateX(100%);
      }
    }
    
    @keyframes bounce {
      0%, 100% {
        transform: translateY(0);
      }
      50% {
        transform: translateY(-5rpx);
      }
    }
    
    @keyframes pulse {
      0%, 100% {
        transform: scale(1);
      }
      50% {
        transform: scale(1.05);
      }
    }
  }
  
  /* 筛选区域 */
  .sticky-filter-tabs {
    position: relative;
    z-index: 10;
    background-color: #020303;
    padding: 20rpx 30rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    
    .filter-tabs {
      display: flex;
      
      .filter-tab {
        padding: 15rpx 30rpx;
        margin-right: 20rpx;
        font-size: 28rpx;
        color: #999999;
        background-color: rgba(255, 255, 255, 0.05);
        border-radius: 30rpx;
        transition: all 0.3s;
        
        &.active {
          color: #020303;
          background-color: #B3F73C;
          font-weight: 500;
        }
      }
    }
    
    .filter-date {
      display: flex;
      align-items: center;
      padding: 15rpx 25rpx;
      font-size: 28rpx;
      color: #e0e0e0;
      background-color: rgba(255, 255, 255, 0.05);
      border-radius: 30rpx;
      
      .tn-icon-calendar {
        margin-left: 10rpx;
        font-size: 32rpx;
      }
    }
  }
  
  /* 明细列表 */
  .coin-records {
    padding: 20rpx 30rpx;
    
    .record-item {
      display: flex;
      align-items: center;
      padding: 30rpx 10rpx;
      border-bottom: 1px solid rgba(255, 255, 255, 0.05);
      
      &:last-child {
        border-bottom: none;
      }
      
      .record-icon {
        width: 80rpx;
        height: 80rpx;
        border-radius: 40rpx;
        background-color: rgba(255, 255, 255, 0.1);
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 20rpx;
        
        &.income-icon {
          background-color: rgba(179, 247, 60, 0.15);
          color: #B3F73C;
        }
        
        &.expense-icon {
          background-color: rgba(255, 74, 94, 0.15);
          color: #FF4A5E;
        }
        
        text {
          font-size: 36rpx;
        }
      }
      
      .record-info {
        flex: 1;
        margin-right: 20rpx;
        
        .record-title {
          font-size: 32rpx;
          color: #e0e0e0;
          margin-bottom: 8rpx;
        }
        
        .record-time {
          font-size: 24rpx;
          color: #999999;
          margin-bottom: 8rpx;
        }
        
        .record-desc {
          font-size: 26rpx;
          color: #AAAAAA;
          line-height: 1.4;
        }
      }
      
      .record-amount {
        font-size: 32rpx;
        font-weight: 500;
        color: #e0e0e0;
        
        &.income {
          color: #B3F73C;
        }
        
        &.expense {
          color: #FF4A5E;
        }
      }
    }
  }
  
  /* 日期选择弹窗 */
  .date-picker-popup {
    background-color: #1e1f21;
    border-radius: 24rpx 24rpx 0 0;
    overflow: hidden;
    
    .date-picker-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 30rpx;
      border-bottom: 1px solid rgba(255, 255, 255, 0.05);
      
      .date-picker-title {
        font-size: 32rpx;
        color: #e0e0e0;
        font-weight: 500;
      }
      
      .close-btn {
        width: 60rpx;
        height: 60rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        
        .tn-icon-close {
          font-size: 36rpx;
          color: #999999;
        }
      }
    }
    
    .date-picker-content {
      padding: 30rpx;
      
      .quick-date-options {
        display: flex;
        flex-wrap: wrap;
        margin-bottom: 30rpx;
        
        .quick-date-option {
          width: calc(33.33% - 20rpx);
          margin: 0 10rpx 20rpx;
          height: 80rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 28rpx;
          color: #e0e0e0;
          background-color: rgba(255, 255, 255, 0.05);
          border-radius: 40rpx;
          
          &.active {
            color: #020303;
            background-color: #B3F73C;
            font-weight: 500;
          }
        }
      }
      
      .custom-date-picker {
        margin-top: 30rpx;
        
        .date-inputs {
          display: flex;
          align-items: center;
          
          .date-input {
            flex: 1;
            
            .input-label {
              font-size: 26rpx;
              color: #999999;
              margin-bottom: 10rpx;
            }
            
            .picker-value {
              height: 80rpx;
              background-color: rgba(255, 255, 255, 0.05);
              border-radius: 8rpx;
              display: flex;
              align-items: center;
              padding: 0 20rpx;
              font-size: 28rpx;
              color: #e0e0e0;
            }
          }
          
          .date-separator {
            padding: 0 20rpx;
            font-size: 28rpx;
            color: #999999;
            margin-top: 30rpx;
          }
        }
      }
      
      .date-picker-actions {
        display: flex;
        margin-top: 60rpx;
        
        .reset-btn, .confirm-btn {
          flex: 1;
          height: 90rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 32rpx;
          border-radius: 45rpx;
        }
        
        .reset-btn {
          color: #e0e0e0;
          background-color: rgba(255, 255, 255, 0.1);
          margin-right: 20rpx;
        }
        
        .confirm-btn {
          color: #020303;
          background: linear-gradient(135deg, #B3F73C, #8eac21);
          font-weight: 500;
        }
      }
    }
  }
}

/* 添加新的样式 */
@keyframes coinJump {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.3);
  }
  100% {
    transform: scale(1);
  }
}

.temp-shine {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at center, rgba(179, 247, 60, 0.3) 0%, rgba(179, 247, 60, 0) 70%);
  z-index: 1;
  pointer-events: none;
  animation: temp-shine 1s ease-out forwards;
}

.floating-coin {
  position: absolute;
  width: 40rpx;
  height: 40rpx;
  background: #B3F73C;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  animation: float-up 1s ease-out forwards;
  
  text {
    color: #020303;
    font-size: 24rpx;
  }
}

@keyframes temp-shine {
  0% {
    opacity: 0.8;
    transform: scale(0);
  }
  100% {
    opacity: 0;
    transform: scale(1.5);
  }
}

@keyframes float-up {
  0% {
    opacity: 1;
    transform: translateY(0) scale(1) rotate(0deg);
  }
  100% {
    opacity: 0;
    transform: translateY(-200rpx) scale(0.5) rotate(90deg);
  }
}
</style> 